<template>
  <div class="openDetail">
    <hr style="border: none">
    <hr>
    <div>
      <el-form :model="tableData" label-width="100px" class="demo-ruleForm" >
        <el-form-item label="报修类型" prop="repaireName">
          <el-input v-model="tableData.repaireName"></el-input>
        </el-form-item>
        <el-form-item label="报修地点" prop="buildingDetailName">
          <el-input v-model="tableData.buildingDetailName"></el-input>
        </el-form-item>
        <el-form-item label="报修物品" prop="goodsName">
          <el-input v-model="tableData.goodsName"></el-input>
        </el-form-item>
        <el-form-item label="房间号" prop="roomNum">
          <el-input v-model="tableData.roomNum"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="repaireDes">
          <el-input type="textarea" v-model="tableData.repaireDes"></el-input>
        </el-form-item>
        <el-form-item label="报修人" prop="userName">
          <el-input v-model="tableData.userName"></el-input>
        </el-form-item>
        <el-form-item label="维修人" prop="repairemanName">
          <el-input v-model="tableData.repairemanName"></el-input>
        </el-form-item>
        <el-form-item label="评论" prop="evaluate">
          <el-input type="textarea" v-model="tableData.evaluate"></el-input>
        </el-form-item>
        <el-form-item label="接单时间" prop="getRepaireTime">
          <el-input v-model="tableData.getRepaireTime"></el-input>
        </el-form-item>
        <el-form-item label="完成时间时间" prop="overTime">
          <el-input v-model="tableData.overTime"></el-input>
        </el-form-item>
        <!--<el-button type="primary" size="small" round @click="getOrder()"-->
                   <!--icon="el-icon-plus" v-show="tableData.repaireStatus==2">评论-->
        <!--</el-button>-->
        <el-button type="primary" size="small" round @click="submitForm()"
                   icon="el-icon-plus" v-show="tableData.repaireStatus==2&&tableData.evaluate!=''" >评论
        </el-button>
        <el-dialog title="评论" :visible.sync="dialogTableVisible" center :append-to-body='true' :lock-scroll="false" width="30%" >
          <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px" v-loading="loading">

            <el-form-item label="评论" prop="evaluate">
              <el-input placeholder="请输入" v-model="evaluate" >
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="dataFormSubmit1()" >提交</el-button>
              <!--<el-button @click="resetForm('dataForm')">重置</el-button>-->
            </el-form-item>
          </el-form>
        </el-dialog>


        <!--<el-form-item label="活动性质" prop="type">-->
          <!--<el-checkbox-group v-model="ruleForm.type">-->
            <!--<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>-->
            <!--<el-checkbox label="地推活动" name="type"></el-checkbox>-->
            <!--<el-checkbox label="线下主题活动" name="type"></el-checkbox>-->
            <!--<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>-->
          <!--</el-checkbox-group>-->
        <!--</el-form-item>-->



      </el-form>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'repaireOrderDetail',
    data () {
      return {
        loading: false,
        dialogTableVisible: false,
        url: {
          queryPage: '/baoxiu/repaire/getAllrepaireDetailById',
          overOrder: '/baoxiu/repaire/overOrder'
        },
        evaluate: '',
        tableData: {
          repaireName: '',
          buildingName: '',
          buildingDetailName: '',
          goodsName: '',
          roomNum: '',
          repaireDes: '',
          repaireStatus: '',
          userName: '',
          repairemanName: '',
          evaluate: '',
          getRepaireTime: '',
          overTime: ''
        },
        dataForm: {
          rid: '',
          dataForm: ''
        },
        queryForm: {
          dialogFormVisible: false,
          data: {
            currentPage: 1,
            pageSize: 10,
            name: ''
          }
        }
      }
    },
    methods: {
      dataFormSubmit1 () {
        let id = this.$route.params.id || 0
        this.$refs['dataForm'].validate(valid => {
          if (valid) {
            this.loading = true
            this.$http({
              url: this.$http.adornUrl('/baoxiu/repaire/addEvaluate'),
              method: 'post',
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
              },
              data: this.$http.adornData(
                {
                  rid: id,
                  evaluate: this.evaluate
                },
                false,
                'form'
              )
            })
              .then(() => {
                this.loading = false
                this.dialogTableVisible = false
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500  // 持续时间

                })
                this.queryFormSubmit(id)
                // this.$emit('changestatus')
                // this.$router.push({name: 'repaire-repaireOrder'})
              }).finally(_ => {
                this.resetForm('dataForm')
              })
          }
        })
      },
      submitForm () {
        this.dialogTableVisible = true// 默认页面不显示为false,点击按钮将这个属性变成true
      },
      // // 评论
      // getOrder () {
      //   let id = this.$route.params.id || 0
      //   this.loading = true
      //   this.$http
      //     .get(this.$http.adornUrl(this.url.overOrder), {
      //       params: this.$http.adornParams({rid: id})
      //     })
      //     .then(() => {
      //       this.$message({
      //         message: '完成订单',
      //         type: 'success',
      //         duration: 1500  // 持续时间
      //
      //       })
      //     })
      // },
      // 加载列表页
      queryFormSubmit: function (rid) {
        this.loading = true
        this.$http
          .get(this.$http.adornUrl(this.url.queryPage), {
            params: this.$http.adornParams({rid: rid})
          })
          .then(({data}) => {
            this.loading = false
            this.tableData = data
            console.log(this.tableData, 'tableData')
          })
      }
    },
    created () {
      let id = this.$route.params.id || 0
      console.log('id', id)
      console.log('11111111111111111111111111111111111111')
      this.queryFormSubmit(id)
    }
  }
</script>

<style scoped>
</style>
